<template>
	<view class="app">
		<!-- 轮播图 -->
		<mix-swiper :list="data.goods_image"></mix-swiper>
		<view class="introduce column" v-if="loaded">
			<view class="price-wrap row">
				<mix-price-view :price="data.price" :size="55"></mix-price-view>
				<!-- <text v-if="data.market_price > data.price" class="m-price">￥{{ data.market_price }}</text> -->
				<!-- <text class="tag">免邮费</text> -->
				<text v-if="user&&user.member_level>1"
					style="color: #ccc;margin-left:10px;font-size: 12px;">佣金：￥{{ data.market_price }}</text>
			</view>
			<text class="title">{{ data.goods_name }}</text>
			<!-- <view class="bot row">
				<text class="fill">销量: {{ data.sale_num || 0 }}</text>
				<text class="fill">库存: {{ data.goods_stock || 0 }}</text>
				<text class="fill">已售出: {{ data.virtual_sale || 0 }}</text>
			</view> -->
		</view>
		<!--  分享 -->
		<!-- <view class="share-wrap row">
			<view class="icon row">
				<text class="mix-icon icon-iconfontxingxing"></text>
				<text>分享</text>
			</view>
			<text class="tit">发给好友看看吧~</text>
			<text class="mix-icon icon-bangzhu1"></text>
			<view class="btn">
				立即分享
				<text class="mix-icon icon-you"></text>
			</view>
		</view>
		<view class="c-list">
			<view class="row b-b" @click="navTo('/pages/coupon/receiveCoupon', {login: true})">
				<text class="tit">优惠券</text>
				<text class="con red">领取优惠券</text>
				<text class="mix-icon icon-you"></text>
			</view>
			<view class="row b-b">
				<text class="tit">促销活动</text>
				<view class="con-list fill column">
					<text>新人首单送20元无门槛代金券</text>
					<text>订单满50减10</text>
					<text>订单满100减30</text>
					<text>单笔购买满两件免邮费</text>
				</view>
			</view>
			<view class="row b-b">
				<text class="tit">服务</text>
				<view class="con">
					<text class="service">7天无理由退换货 ·</text>
					<text class="service">假一赔十 ·</text>
				</view>
			</view>
		</view> -->
		<!-- 评价 -->
		<!-- 	<view id="rating" class="rating-wrap column" :class="{'no-data': !ratingData.data}">
			<view class="e-header" @click="navTo('/pages/rating/rating?id='+data._id)">
				<text class="tit">商品评价</text>
				<text>({{ ratingData.count || 0 }})</text>
				<text class="tip">好评率 {{ data.rating_ratio || 100 }}%</text>
				<text class="mix-icon icon-you"></text>
			</view>
			<view>
			</view>
		</view> -->
		<view class="detail-desc" style="min-height:300px;padding: 15px;">
			<view class="d-header center">
				<text>图文详情</text>
			</view>
			<mp-html :content="data.goods_content" :lazy-load="true" loading-img="/static/load.jpg" />
		</view>
		<!-- sku组件 -->
		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :localdata="skuInfo" :mode="skuMode"
			@add-cart="addCart" @buy-now="buyNow">
		</vk-data-goods-sku-popup>
		<!-- 底部操作菜单 -->
		<view class="mix-botoom-operation row">
			<view class="nav-group row">
				<view class="nav column center" @click="Switch('/pages/tabbar/home')">
					<text class="mix-icon icon-home"></text>
					<text class="tit">首页</text>
				</view>
				<view class="nav column center" @click="Switch('/pages/tabbar/cart')">
					<text class="mix-icon icon-gouwuche"></text>
					<text class="tit">购物车</text>
					<view class="number center" v-if="cartnum>0">
						<text>{{cartnum}}</text>
					</view>
				</view>
				<view class="nav column center" @click="collect">
					<text class="mix-icon icon-shoucang-1" v-if="sc==0"></text>
					<text class="mix-icon icon-shoucang ysc" v-else></text>
					<text class="tit" v-if="sc==0">收藏</text>
					<text class="tit ysc" v-else>已收藏</text>
				</view>
			</view>
			<view class="btn-group row">
				<view class="btn center" @click="openSkuPopup">
					<text>加入购物车</text>
				</view>
				<view class="btn center" @click="openSkuPopup">
					<text>立即购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html'
	import mixSwiper from './components/mix-swiper' //轮播图
	var that; // 当前页面对象
	export default {
		components: {
			mpHtml,
			mixSwiper,
		},
		data() {
			return {
				//商品id
				goods_id: 0,
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				// 后端返回的商品SKU信息
				skuInfo: {},
				data: {
					//商品信息
				},
				ratingData: {}, //评价
				cartnum: 0, //购物车商品总数量
				sc: 0, //是否收藏
				user: {},
				loaded: false,
			};
		},
		onLoad(options) {
			if (options.uid) {
				//转发
				uni.setStorageSync('uid', options.uid);
			}
			this.user = uni.getStorageSync('userInfo');
			that = this;
			that.goods_id = options.id;
			//获取商品详情
			that.$http.post('goods/detail', {
				pid: options.id
			}).then((res) => {
				if (uni.getStorageSync('userInfo').member_level == 2) {
					res.data.data.market_price = parseFloat(((res.data.data.market_price * 50) / 100)).toFixed(2)
				}
				that.data = res.data.data;
				that.sc = res.data.data.sc;
				that.loaded = true;
			})
			that.init(options);
			if (uni.getStorageSync('userInfo')) {
				that.sumCart();
				//that.addProductHistory();
			}
		},
		onShareAppMessage(res) {
			return {
				title: that.data.goods_name,
				path: '/pages/product/detail?id=' + this.goods_id + '&uid=' + uni.getStorageSync('userInfo').member_id,
			}
		},
		methods: {
			//加载评价
			// loadRating() {},
			//添加浏览历史
			addProductHistory() {
				this.$http.post('Goods/addGoodsBrowse', {
					goods_id: this.goods_id
				})
			},
			// sku组件 开始-----------------------------------------------------------
			// 初始化
			init(options = {}) {},
			//打开sku组件
			openSkuPopup() {
				if (uni.getStorageSync('userInfo')) {
					that.$http.post('goods/getsku', {
						pid: that.goods_id
					}).then((res) => {
						that.skuInfo = res.data.data;
						that.skuKey = true;
					})
				} else {
					that.navTo('/pages/login/login');
				}
			},
			// 加入购物车按钮
			addCart(obj) {
				if (uni.getStorageSync('userInfo')) {
					this.$http.post('Cart/add', {
						sku_id: obj._id,
						num: obj.buy_num,
						action: 'inc'
					}).then((res) => {
						if (res.data.code == 0) {
							this.sumCart();
							that.skuKey = false;
							this.toast(res.data.message);
						}
					})
				}
			},
			// 立即购买
			buyNow(obj) {
				obj.spec_name = obj.sku_name_arr.join(' ');
				obj.num = obj.buy_num;
				obj.sku_id = obj._id;
				obj.sku_image = obj.image;
				setTimeout(() => {
					that.skuKey = false;
				}, 500);
				var json = '[' + JSON.stringify(obj) + ']';
				json = JSON.parse(json);
				that.navTo('/pages/order/makeorder', json, true);
			},
			// sku组件 结束----------------------------------------------------------
			Switch(page) {
				uni.switchTab({
					url: page
				})
			},
			//统计购物车商品总数量
			sumCart() {
				this.$http.post('Cart/count', {}).then((res) => {
					this.cartnum = res.data.data;
				})
			},
			collect() {
				if (uni.getStorageSync('userInfo')) {
					var action = 'sc';
					if (that.sc == 0) {
						action = 'sc'
					} else if (this.sc == 1) {
						action = 'qxsc';
					}
					this.$http.post('Goods/addCollect', {
						goods_id: that.goods_id,
						action: action
					}).then((res) => {
						if (res.data.code == 0) {
							that.sc = res.data.data;
						}
					})
				} else {
					that.navTo('/pages/login/login');
				}
			}
		},
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style scoped lang='scss'>
	.app {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		&:after {
			content: '';
			display: block;
			width: 100%;
			height: 100rpx;
		}
	}

	/* 标题简介 */
	.introduce {
		background: #fff;
		padding: 20rpx 30rpx;

		.title {
			min-height: 44rpx;
			font-size: 32rpx;
			color: #333;
			line-height: 44rpx;
			font-weight: 700;
			margin-top: 10px;
		}

		.price-wrap {
			min-height: 40rpx;
			margin-top: 28rpx;
			font-size: 26rpx;
		}

		.m-price {
			margin-left: 10rpx;
			margin-right: 16rpx;
			color: #999;
			text-decoration: line-through;
		}

		.tag {
			transform: translateY(4rpx);
			padding: 0 10rpx;
			margin-left: 8rpx;
			background: $base-color;
			font-size: 20rpx;
			color: #fff;
			line-height: 32rpx;
			border-radius: 4rpx;
			position: relative;
			bottom: 8rpx;
		}

		.bot {
			padding: 28rpx 0 10rpx 4rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	/* 分享 */
	.share-wrap {
		background: linear-gradient(to right, #fdf5f6, #fbebf6);
		height: 76rpx;
		padding: 0 30rpx;
		color: $base-color;

		.icon {
			width: 90rpx;
			height: 30rpx;
			border: 1px solid $base-color;
			border-radius: 4rpx;
			position: relative;
			overflow: hidden;
			font-size: 22rpx;

			&:after {
				position: absolute;
				left: -20rpx;
				top: -12rpx;
				content: '';
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: $base-color;
			}
		}

		.icon-iconfontxingxing {
			position: relative;
			z-index: 1;
			font-size: 24rpx;
			margin-left: 2rpx;
			margin-right: 10rpx;
			color: #fff;
		}

		.tit {
			flex: 1;
			font-size: 26rpx;
			color: #666;
			margin-left: 14rpx;
		}

		.icon-bangzhu1 {
			padding: 10rpx;
			font-size: 30rpx;
			display: none;
		}

		.btn {
			padding-left: 20rpx;
			font-size: 24rpx;
			color: $base-color;
		}

		.icon-you {
			font-size: 22rpx;
			margin-left: 4rpx;
			color: $base-color;
		}
	}

	.c-list {
		font-size: 26rpx;
		color: #888;
		background: #fff;

		.row {
			min-height: 82rpx;
			padding: 16rpx 30rpx;
			position: relative;

			&:after {
				border-color: #eaeaea;
			}

			&:last-child:after {
				border: 0;
			}
		}

		.tit {
			width: 140rpx;
		}

		.con {
			flex: 1;
			color: #333;

			.attr {
				margin-right: 10rpx;
			}

			.service {
				margin-right: 30rpx;

				&:last-child {
					margin: 0;
				}
			}
		}

		.con-list {
			color: #333;

			text {
				line-height: 40rpx;
			}
		}

		.red {
			color: $base-color;
		}

		.icon-you {
			font-size: 24rpx;
			color: #999;
		}
	}

	/* 评价 */
	.rating-wrap {
		padding: 20rpx 30rpx 0rpx;
		background: #fff;
		margin-top: 12rpx;

		&.no-data {
			padding: 10rpx 30rpx 10rpx;
		}

		.e-header {
			display: flex;
			align-items: center;
			height: 70rpx;
			font-size: 28rpx;
			color: #333;
		}

		.tit {
			font-size: 32rpx;
			color: #333;
			font-weight: 700;
			margin-right: 4rpx;
		}

		.tip {
			flex: 1;
			font-size: 26rpx;
			color: #999;
			text-align: right;
		}

		.icon-you {
			margin-left: 8rpx;
			font-size: 24rpx;
			color: #999;
		}

		.mix-rating-item::after {
			border: 0;
		}
	}

	/*  详情 */
	.detail-desc {
		margin-top: 12rpx;
		background: #fff;

		.d-header {
			height: 80rpx;
			font-size: 30rpx;
			color: #333;

			text {
				margin: 0 20rpx;
			}

			&:before,
			&:after {
				content: '';
				width: 60rpx;
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* sku */
	.form-item {
		display: flex;
	}

	.form-item .title,
		{
		padding: 20rpx 0;
		width: 360rpx
	}

	.form-item .input-view {
		display: flex;
		align-items: center;
	}

	.form-item .input {
		margin-left: 40rpx;
		border: 1px solid #d6d6d6;
		border-radius: 10rpx;
		padding: 8rpx 30rpx;
		font-size: 28rpx;
	}

	.radio {
		padding: 6rpx 0rpx;
	}

	.config-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		margin-top: 40rpx;
		padding-bottom: 10rpx;
	}

	/* 底部菜单栏 */
	.mix-botoom-operation {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 90;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, .1);
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.nav-group {
		padding-left: 6rpx;

		.nav {
			width: 90rpx;
			height: 80rpx;
			color: #333;
			position: relative;

			&.active {
				color: $base-color;
			}
		}

		.tit {
			font-size: 20rpx;
		}

		.mix-icon {
			height: 48rpx;
			line-height: 48rpx;
			font-size: 38rpx;
			margin-bottom: 6rpx;
		}

		.number {
			position: absolute;
			right: 16rpx;
			top: 2rpx;
			min-width: 24rpx;
			height: 24rpx;
			padding: 0 8rpx;
			font-size: 16rpx;
			color: #fff;
			background-color: $base-color;
			border-radius: 100rpx;
		}
	}

	.btn-group {
		flex: 1;
		margin: 0 16rpx 0 14rpx;
		overflow: hidden;

		.btn {
			flex: 1;
			height: 76rpx;
			font-size: 30rpx;
			color: #fff;
			background-color: orange;
			border-radius: 100rpx 0 0 100rpx;

			&:last-child {
				background-color: $base-color;
				border-radius: 0 100rpx 100rpx 0;
			}
		}
	}

	.ysc {
		color: $base-color;
	}
</style>
